<template>
	<view class="form-box">
		<view v-for="(item, idx) in htmlData" :key="idx">
			<!-- 文本 -->
			<view class="items-flex botton-bot " v-if="item.type == 'text'">
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>
				<input type="text" placeholder-class="holder" v-model="item.value" :placeholder="item.default_value" />
			</view>
			<!-- 地址 -->
			<view class="items-flex botton-bot " v-if="item.type == 'area'" @tap="popup_bottom(idx)">
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>
				<input type="text" disabled placeholder-class="holder" v-model="item.value" :placeholder="item.default_value" />
			</view>
			<!-- 时间 -->
			<view class="items-flex botton-bot " v-if="item.type == 'time'" @click="index = idx">
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>
				<picker mode="time" @change="bindTimeChange">
					<input type="text" disabled placeholder-class="holder" v-model="item.value" :placeholder="item.default_value" />
				</picker>
			</view>
			<!-- 单选 -->
			<view class="items-flex botton-bot " v-if="item.type == 'radio'">
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>
				<radio-group @change="radioChange" :data-idx="idx" class="radioLisr">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(i, ids) in item.radio_value" :key="ids">
						<view><radio :value="i" /></view>
						<view>{{ i }}</view>
					</label>
				</radio-group>
			</view>
			<!-- 下拉选择 -->
			<view
				class="items-flex botton-bot "
				v-if="item.type == 'checbox'"
				@click="
					indexCheck = item.checbox_value;
					index = idx;
				"
			>
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>
				<picker @change="bindPickerChange" :range="item.checbox_value" range-key="value">
					<input type="text" disabled placeholder-class="holder" v-model="item.value" :placeholder="item.default_value" />
				</picker>
			</view>
			<!-- 文本域 -->
			<view class="items-flex botton-bot  items-textarea" v-if="item.type == 'textarea'">
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>

				<textarea v-model="item.value" class="textarea" placeholder-class="holder" :placeholder="item.default_value" />
			</view>
			<!-- 日期 -->
			<view class="items-flex botton-bot " v-if="item.type == 'date'" @click="index = idx">
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>
				<picker mode="date" @change="bindDateChange">
					<input type="text" disabled placeholder-class="holder" v-model="item.value" :placeholder="item.default_value" />
				</picker>
			</view>
			<!-- 密码 -->
			<view class="items-flex botton-bot " v-if="item.type == 'password'">
				<text>
					{{ item.name }}
					<text style="color:#FF0000" v-if="item.required == 1">*</text>
				</text>
				<input type="text" password placeholder-class="holder" v-model="item.value" :placeholder="item.default_value" />
			</view>
		</view>
		<linkAddress ref="linkAddress" :height="height"></linkAddress>
	</view>
</template>

<script>
import linkAddress from '../xuan-linkAddress/xuan-linkAddress.vue';
export default {
	components: {
		linkAddress
	},
	props: {
		htmlData: {
			type: Array,
			default() {
				return [];
			}
		},
		getForm: {
			type: Function,
			default: null
		}
	},
	data() {
		return {
			data: '请选择地址',
			height: '500px',
			address: '',
			index: 0,
			indexCheck: null
		};
	},
	methods: {
		popup_bottom: function(index) {
			this.height = '550rpx';
			//显示
			this.show_popup();
			this.index = index;
		},
		//显示弹窗
		show_popup: function() {
			this.$refs.linkAddress.show();
		},
		// 选择时间
		bindTimeChange(e) {
			this.htmlData[this.index].value = e.target.value;
		},
		// 单选
		radioChange(e) {
			this.htmlData[e.currentTarget.dataset.idx].value = e.target.value;
		},
		bindPickerChange(e) {
			this.htmlData[this.index].value = this.indexCheck[e.target.value].value;
		},
		// 日期
		bindDateChange(e) {
			this.htmlData[this.index].value = e.target.value;
		}
	},
	created() {
		let that = this;
		uni.$on('confirmCallback', function(data) {
			let address = JSON.parse(data);
			if (address.province) {
				console.log(that.htmlData[that.index]);
				that.htmlData[that.index].value = address.province + address.city + address.district;
				console.log(that.htmlData[that.index]);
			}
		});
	}
};
</script>

<style>
.radioLisr {
	display: flex;
	flex-wrap: wrap;
}
.uni-list-cell {
	display: flex;
	align-items: center;
	margin: 10upx;
}
.items-flex {
	display: flex;
	align-items: center;
	min-height: 96upx;
	font-size: 30upx;
}

.items-textarea {
	display: flex;
	align-items: flex-start;
	padding: 15upx 0;
}
.items-flex > text:nth-of-type(1) {
	width: 200upx;
}
.items-textarea > text {
	width: 200upx;
}
.items-flex input {
	font-size: 30upx;
}
.form-box {
	width: 650upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 18upx;
	margin: auto;
	padding: 0 24upx;
	margin-bottom: 20upx;
}
uni-picker {
	height: 100%;
	width: 400upx;
	display: flex;
	align-items: center;
}
.textarea {
	font-size: 30upx;
	height: 300upx;
	flex: 2;
}
uni-textarea {
	width: auto;
}
.botton-bot {
	position: relative;
}
.botton-bot:after {
	position: absolute;
	content: '';
	left: 24upx;
	right: 24upx;
	bottom: 0;
	height: 1px;
	background: #f9f9f9;
}
</style>
